import {defineComponent} from 'vue';

import './index.scss'
import {MDPLUS} from '../md-plus'
import {DocMenu} from './doc-menu'
import usePageNavAnchor from './hooks/usePageNavAnchor';

import {menus} from '@/config/docs-menu';
import {ThemeController} from "@/components/theme-controller";

export const DocPageComponent = defineComponent({
  props:{
    //即可以通过传递content的形式进行渲染
    //,也支持直接传递一个 <ContentComponent/> 作为默认插槽进行渲染
    content: {type: String, required: false}
  },
  components:{
    DocMenu
  },
  setup(props,ctx) {
    const {
      contentRef,
      state,
      activeNavIndex,
      onClickNavItem
    } = usePageNavAnchor(props);


    return () => {
      return <article class={{
        'doc-page': true,
        [`theme-${ThemeController.state.themeName}`]: !!ThemeController.state.themeName,
      }}>
        <doc-menu menus={menus}/>
        <section class="doc-page-content" ref={contentRef}>
          {
            props.content ?
              <MDPLUS content={props.content}/>
              : ctx.slots.default ?
                  ctx.slots.default() : null
          }
        </section>
        <div class="doc-page-anchor">
          <ul class="doc-page-anchor__list">
            {
              state.navList.map((item, index) => (
                <li key={index}
                    class={{
                      'doc-page-anchor__list__item': true,
                      'doc-page-anchor__list__item--active': index === activeNavIndex.value
                    }}
                    onClick={() => onClickNavItem(item.name)}
                >
                  <div class='doc-page-anchor__list__item__tag'>
                    <i class='doc-page-anchor__list__item__tag__inner'/>
                  </div>
                  <span class='doc-page-anchor__list__item__index'>{index + 1}、</span>
                  <span>{item.name}</span>
                </li>
              ))
            }
          </ul>
        </div>
      </article>;
    }
  }
})
